<template>
  <div class="main" ref="mainDom">
    <div class="thrid">
      <el-empty description="暂无数据" v-if="articles.length == 0"></el-empty>
      <div class="articles-wrap" v-else>
        <router-link
          class="articles-item"
          v-for="(item, index) in articles"
          :key="index"
          :to="'/Report/' + item.id"
          @click="setPath(item.type)"
        >
          <div class="tag">
            <el-tag>{{ item.type }}</el-tag>
          </div>
          <div class="articles-content" v-html="item.body"></div>
          <div class="articles-info">
            <span>{{ item.userName }}</span>
            <span style="margin-left: 12px">{{ item.createTime }}</span>
          </div>
        </router-link>
      </div>
      <!-- <div class="pager-item">
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
      </div> -->
    </div>
    <div class="report">
      <el-card class="box-card">
        <template #header>
          <div class="card-header-report">发布帖子</div>
        </template>
        <div class="tag-choose">
          <span>请选择分类：</span>
          <el-select v-model="chooseValue" placeholder="Select">
            <el-option
              v-for="item in classification"
              :key="item.tag"
              :label="item.title"
              :value="item.title"
            >
            </el-option>
          </el-select>
        </div>
        <div class="tinymc">
          <tinymce
            id="myedit"
            ref="editor"
            @setTinymce="setTinymce"
            :disabled="disabled"
            :value="'请输入内容'"
            @onClick="onClick"
          />
          <div class="btnGrou">
            <el-button type="primary" plain @click="submitArticle"
              >发布</el-button
            >
            <el-button type="warning" plain @click="clear">清空内容</el-button>
          </div>
          <!-- <button @click="clear">清空内容</button> -->
          <!-- <button @click="disabled = true">禁用</button> -->
        </div>
      </el-card>
    </div>
  </div>
</template>
<style scoped>
a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}
.thrid {
  width: 1000px;
  margin: 0 auto;
  margin-top: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  min-height: 320px;
  padding: 12px 0;
  max-height: 600px;
  background: #fff;
  position: relative;
}
.report {
  margin-top: 12px;
}
.report :deep(.el-card__header) {
  padding: 12px 18px !important;
  background: #409eff;
  text-align: left;
}
.card-header-report {
  color: #fff;
}
.tinymc {
  margin-top: 20px;
}
.tag-choose {
  text-align: left;
}
.btnGrou {
  text-align: right;
  margin-top: 20px;
}
.pager-item {
  position: absolute;
  bottom: 0;
  margin: 0 auto;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.articles-item {
  text-align: left;
  height: 52px;
  color: #333;
  padding: 0 38px;
  display: flex;
  border-bottom: 1px solid rgb(236, 245, 255);
  cursor: pointer;
  align-items: center;
}
.articles-content {
  width: 80%;
}
.articles-info {
  min-width: 180px;
  color: #aaa;
  font-size: 12px;
}
.tag {
  margin-right: 12px;
}
</style>
<script>
import tinymce from "../components/tinymce.vue";
export default {
  name: "Main",
  components: {
    tinymce,
  },
  data() {
    return {
      articles: [],
      chooseValue: "",
      msg: "请填写信息",
      disabled: false,
      classification: [],
    };
  },
  created() {
    this.getArticles();
    //this.classification = this.$store.state.classification;
    this.getArticleType();
  },
  watch:{
    $route(){
      this.getArticles();
    }
  },
  methods: {
    getArticles() {
      let searchStr = this.$route.query.searchStr || "";
      let typeStr = this.$route.query.typeStr || "";
      let postData = {
        searchStr:searchStr,
        typeStr:typeStr
      };
      console.log(this.$route);
      this.$api.user.getArticles(postData).then((res) => {
        if (res.status == 0) {
          this.articles = res.data;
        }
        console.log(res);
      });
    },
    getArticleType() {
      this.$api.user.getArticleType().then((res) => {
        if (res.status == 0) {
          let data = res.data.split(",");
          let list = [];
          for (let i = 0; i < data.length; i++) {
            let obj = {
              title: data[i],
              tag: i,
            };
            list.push(obj);
          }
          this.classification = list;
          this.$store.commit("setClassification", list);
        }
      });
    },
    // 内容
    getContent() {
      console.log("内容", this.msg);
    },
    // 鼠标单击的事件
    onClick(e, editor) {
      console.log("Element clicked");
      console.log(e);
      console.log(editor);
    },
    // 清空内容
    clear() {
      console.log(this.$refs.editor);
      this.$refs.editor.clear();
    },
    setTinymce(content) {
      this.msg = content;
    },
    submitArticle() {
      if (this.chooseValue == "") {
        alert("请选择分类");
        return;
      }
      let token = this.$store.state.userInfo.token;
      console.log(this.$store.state.userInfo, "2222");
      if (!token) {
        alert("请登录");
        return;
      }
      if (!this.msg) {
        alert("内容不能为空");
        return;
      }
      let postData = {
        token: token,
        type: this.chooseValue,
        title: this.chooseValue,
        body: this.msg,
      };
      this.$api.user.addNew(postData).then((res) => {
        if (res.status == 0) {
          this.$tip({
            message: "添加成功",
            type: "success",
          });
        } else {
          this.$tip.error(res.msg);
        }
      });
    },
    setPath(data) {
      console.log(data, "sss");
      this.$emit("setPath", data);
    }
  },
};
</script>
